<template>
  <div id="traffic-information" @click="displayRoadConditions">路况信息</div>
  <div>
    <el-dialog v-model="dialogVisible" title="路况信息" width="700px" draggable>
      <div class="nav-bar">
        <el-input
          placeholder="搜索路况"
          v-model="queryContent"
          @keyup.enter="sreachRoadData"
        />
        <el-button-group>
          <el-button :icon="Refresh" @click="updata" />
          <el-button :icon="Grid" />
        </el-button-group>
      </div>

      <el-table border style="width: 100%" :data="pagingData">
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="eventType" label="事件类型"> </el-table-column>
        <el-table-column prop="eventAddress" label="事件地址">
        </el-table-column>
        <el-table-column prop="buildingSign" label="附件建筑">
        </el-table-column>
        <el-table-column prop="eventTime" label="发生时间"> </el-table-column>
        <el-table-column prop="eventDetails" label="事件描述">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <div class="btn" v-if="!row.isExamine">
              <div>
                <el-button type="success" size="small" @click="approved(row)"
                  >通过</el-button
                >
              </div>
              <div>
                <el-button type="danger" size="small" @click="del(row)"
                  >忽略</el-button
                >
              </div>
            </div>
            <div class="text" v-else>
              <span>审核通过</span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        small
        background
        layout="prev, pager, next"
        :default-page-size="pageSise"
        :total="showData.length"
        v-model:current-page="currentPage"
      />
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { Grid, Refresh } from '@element-plus/icons-vue';
import {
  getRoadCondition,
  deleteRoadCondition,
  reviseRoadCondition,
} from '../../../request/api';
const dialogVisible = ref(false);
const currentPage = ref(1);
const queryContent = ref('');
const pageSise = 2;
const submittedData = ref([]);
const showData = ref([]);
//点击出现弹窗
function displayRoadConditions() {
  getData();
  currentPage.value = 1;
  dialogVisible.value = true;
}
//获取数据
async function getData() {
  await getRoadCondition().then((res) => {
    submittedData.value = res.data;
    showData.value = submittedData.value;
  });
}
//查询数据
function sreachRoadData() {
  const sreachdata = submittedData.value.filter((item) =>
    Object.values(item).some((val) => val == queryContent.value)
  );
  if (sreachdata.length === 0) {
    ElMessage({
      showClose: true,
      message: '未查询到结果',
      type: 'warning',
    });
  } else {
    showData.value = sreachdata;
  }
  queryContent.value = '';
}
//审核通过
function approved(item) {
  const id = item.id;
  const data = {
    isExamine: true,
  };
  reviseRoadCondition(id, data);
  getData();
}
//删除数据
function del(item) {
  const id = item.id;
  deleteRoadCondition(id);
  getData();
}
//更新数据,删除已经审核通过的数据
function updata() {
  submittedData.value.forEach((item) => {
    if (item.isExamine) {
      deleteRoadCondition(item.id);
    }
  });
  getData();
  currentPage.value = 1;
}

//计算分页数据
const pagingData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSise;
  const endIndex = startIndex + pageSise;
  return showData.value.slice(startIndex, endIndex);
});
</script>

<style lang="scss" scoped>
.el-dialog {
  .nav-bar {
    display: flex;
    justify-content: flex-end;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
  .el-table {
    margin: 10px 0;

    .btn {
      div {
        margin-top: 5px;
      }
    }
  }
  .el-pagination {
    display: flex;
    justify-content: flex-end;
  }
}
:deep(.el-dialog__body) {
  border-top: 1px solid rgb(220, 217, 217);
  padding-top: 15px;
}
</style>
